<template>
  <div class="tag">
    <el-card class="box-card">
      <div slot="header" class="d-flex align-items-center">
        <img class="card-icon" src="../assets/biaoqian.png" />
        <span>{{$t('tag.tag')}}</span>
      </div>
      <div class="text item">
        <el-tag size="mini" class="tag-item" @click="tag('Java')">测试标签[12]</el-tag>
		<el-tag  size="mini" class="tag-item" v-for="tag in taginfo " :key="tag.id">{{tag.tagname}}[{{tag.questionNum}}]</el-tag>
      </div>
	  
    </el-card>
  </div>
</template>

<script>
import { getTagsWithNUm } from "../api";
export default {
  name: "tag",
  methods: {
    tag(name) {
      this.$router.push({
        name: "tag",
        params: {
          name: name
        }
      });
    },
    initTagData() {
      getTagsWithNUm().then(result => {
        console.log(result);
		this.taginfo=result.data.taginfo
      });
    }
  },
  data(){
	  return{
		  taginfo:[{
			  id:'',
			  tagname:'',
			  questionNum:''
		  }]
	  }

  },
  created() {
    this.initTagData();
  }
};
</script>

<style scoped>
.box-card .item:hover {
  color: #409eff;
  cursor: pointer;
}

.box-card span {
  font-weight: bold;
}

.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.tag-item {
  margin-right: 10px;
}
</style>